<template>
    <div>
        <el-form>
            <el-button style="float: right" icon="el-icon-lx-search" type="primary"  @click="selectMedecine"></el-button>
            <el-input type="text" v-model="medecineQuery.name" placeholder="填写名称" style="float: right;width: 200px"></el-input>
            <el-form-item  style="float: right"  >
                <el-select v-model="medecineQuery.sort" placeholder="选择类别" style="width: 150px;">
                    <el-option label="中药" value="中药" > </el-option>
                    <el-option label="西药" value="西药" ></el-option>
                    <el-option label="不限" value="" ></el-option>
                </el-select>
            </el-form-item>

        </el-form>
            <el-table
                    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column label="序号" width="80" align="center">
                    <template #default="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="药品编号"
                        align="center"
                        sortable
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价(元)"
                        align="center"
                >

                </el-table-column>
                <el-table-column
                        prop="sell"
                        label="售价(元)"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="类别"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="specification"
                        label="规格"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="vender"
                        label="厂家"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="batch"
                        label="批次"
                        align="center"
                >
                </el-table-column>

                <el-table-column
                        prop="beginDate"
                        label="生产日期"
                        align="center"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="endDate"
                        label="保质期(月)"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="剩余数量"
                        align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="220" align="center">

                    <template #default="scope">

                        <el-button type="primary" icon="el-icon-lx-edit" circle
                                   @click="updatemedecines(scope.$index, scope.row)"></el-button>
                        <el-button type="success" icon="el-icon-lx-roundadd" circle
                                   @click="addmedecines(scope.$index, scope.row)"></el-button>
                        <el-button type="warning" icon="el-icon-lx-move" circle
                                   @click="reducemedecines(scope.$index, scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="deletemedecine(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <center>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                >
                </el-pagination>
            </center>
        <el-dialog   v-model="addVisible" width="420px" >
            <el-form :model="addmedecine" >
                <el-form-item label="药品编号" >
                    <el-input v-model="addmedecine.medecineId" readonly="readonly" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="添加数量" >
                    <el-input-number style="margin-left: 20px" v-model="addmedecine.number" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addmedecineform">确 定</el-button></center>
            </div>
        </el-dialog>

        <el-dialog   v-model="reduceVisible" width="420px" >
            <el-form :model="medecineManager" >
                <el-form-item label="药品编号" >
                    <el-input v-model="medecineManager.medecineId" readonly="readonly" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="减少数量" >
                    <el-input-number style="margin-left: 20px" v-model="medecineManager.number" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="reduceVisible = false">取 消</el-button>
                    <el-button type="primary" @click="reducemedecineform">确 定</el-button></center>
            </div>
        </el-dialog>

        <el-dialog   v-model="deleteVisible" width="420px" >
            <h3 style="text-align: center">确认删除该药品?</h3>
            <br>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="deleteVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deletemedecineform">确 定</el-button></center>
            </div>
        </el-dialog>

        <el-dialog   v-model="updateFormVisble" width="420px" >
            <el-form ref="updatemedecineForm" :model="medecineInfo" :rules="rules" label-width="100px" class="login-box">
                <br>
                <el-form-item label="编号"  class="out"  prop="id">
                    <el-input  type="text" readonly="readonly" v-model="medecineInfo.id" class="inputs" placeholder="请输入编号"  />
                </el-form-item>
                <el-form-item label="名称"  class="out"  prop="name">
                    <el-input type="text" v-model="medecineInfo.name" class="inputs"  placeholder="请输入名称"/>
                </el-form-item>
                <el-form-item label="价格(元)"  class="out"  prop="price">
                    <el-input type="text"  v-model="medecineInfo.price" class="inputs" placeholder="请输入价格"/>
                </el-form-item>
                <el-form-item label="售价(元)" class="out"  prop="sell">
                    <el-input type="text"  v-model="medecineInfo.sell" class="inputs" placeholder="请输入售价"/>
                </el-form-item>
                <el-form-item label="类别"  class="out" prop="sort">
                    <el-radio  v-model="medecineInfo.sort" style="margin-left: 50px" label="中药">中药</el-radio>
                    <el-radio v-model="medecineInfo.sort"  label="西药">西药</el-radio>
                </el-form-item>
                <el-form-item label="生产厂家" class="out"  prop="vender">
                    <el-input type="text"  v-model="medecineInfo.vender" class="inputs" placeholder="请输入厂家名称"/>
                </el-form-item>
                <el-form-item label="批次" class="out"  prop="batch">
                    <el-input type="text"  v-model="medecineInfo.batch" class="inputs" placeholder="请输入批次"/>
                </el-form-item>
                <el-form-item label="规格(粒)" class="out"  prop="specification">
                    <el-input type="text"  v-model="medecineInfo.specification" class="inputs" placeholder="请输入规格"/>
                </el-form-item>
                <el-form-item label="用量(粒/次)" class="out"  prop="dosage">
                    <el-input type="text"  v-model="medecineInfo.dosage" class="inputs" placeholder="请输入用量"/>
                </el-form-item>
                <el-form-item label="用法(次/天)" class="out"  prop="useWay">
                    <el-input type="text"  v-model="medecineInfo.useWay" class="inputs" placeholder="请输入用法"/>
                </el-form-item>

                <el-form-item label="保质期(月)"  class="out"  prop="endDate">
                    <el-input-number style="margin-left: 20px;margin-right: 90px" v-model="medecineInfo.endDate" @change="handleChange" :min="1" :max="36" label="描述文字">

                    </el-input-number>
                </el-form-item>
                <el-form-item label="生产日期"  class="out"  prop="beginDate">
                    <el-date-picker
                            v-model="medecineInfo.beginDate"
                            type="date"
                            placeholder="选择日期"
                            @change="getTime">
                    </el-date-picker>
                </el-form-item>


            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateOnSubmit('updatemedecineForm')">确 定</el-button></center>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { ElMessage } from "element-plus";
    import axios from "axios";
    export default {
        name: "DrugManagement",
        data(){
            var valiNumberPass1 = (rule, value, callback) => {//包含小数的数字
                let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
                if (value === '') {
                    callback(new Error('请输入内容'));
                }else if (!reg.test(value)) {
                    callback(new Error('请输入数字'));
                }else if (value*1<=0) {
                    callback(new Error('数字要大于0'));
                }  else {
                    callback();
                }
            };
            return{
                name:'',
                num:0,
                type:'',
                search:'',
                addVisible:false,
                addmedecine: {
                    medecineId:'',
                    number:1,
                },
                medecineManager: {
                    id:'',
                    medecineId:'',
                    number:1,
                },
                reduceVisible:false,
                tableData: {
                    id: '',
                    name: '',
                    price:'',
                    sell:'',
                    sort:'',
                    specification:'',
                    vender:'',
                    batch:'',
                    dosage:'',
                    useWay:'',
                    beginDate   :'',
                    endDate:'',
                    number:0
                },
                tableData:[],
                medecineQuery:{
                    name:'',
                    sort:''
                },
                deletemedecineId:'',
                deleteVisible:false,
                currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                dialogFormVisible: false,
                updateFormVisble: false,
                medecineInfo: {
                    id: '',
                    deleted:0,
                    name: '',
                    price:'',
                    sell:'',
                    sort:'',
                    endDate:6,
                    specification:'',
                    vender:'',
                    batch:'',
                    dosage:'',
                    useWay:'',
                    beginDate:'',
                },
                rules:{
                    name:[
                        {required:true,message:"名称不可为空",trigger:'blur'}
                    ],
                    id:[
                        {required:true,message:"编号不可为空",trigger:'blur'}
                    ],
                    price:[
                        {required:true,message:"价格不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    sell:[
                        {required:true,message:"售价不可为空",trigger:'blur'},
                        { validator: valiNumberPass1, trigger: 'blur' }
                    ],
                    sort:[
                        {required:true,message:"类别不可为空",trigger:'blur'}
                    ],
                    endDate:[
                        {required:true,message:"保质期不可为0",trigger:'blur'}
                    ],
                    specification:[
                        {required:true,message:"规格不可为空",trigger:'blur'}
                    ],
                    vender:[
                        {required:true,message:"厂家不可为空",trigger:'blur'}
                    ],
                    batch:[
                        {required:true,message:"批次不可为空",trigger:'blur'}
                    ],
                    dosage:[
                        {required:true,message:"用量不可为空",trigger:'blur'}
                    ],
                    useWay:[
                        {required:true,message:"用法不可为空",trigger:'blur'}
                    ],
                    beginDate:[
                        {required:true,message:"生产日期不可为空",trigger:'blur'}
                    ],

                },

            }
        },
        mounted(){
            this.create();
        },
        activated(){
            this.create();
        },
        methods: {
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/medecine-info/getMedecinList").then(resp=> {
                    this.tableData= resp.data.data.medecines;
                    this.tableData.reverse();
                })
            },
            reducemedecineform(){

                axios.post("http://119.29.60.153:8001/doctorservice/medecine-manager/output?medecineId="+this.medecineManager.medecineId+"&number="+this.medecineManager.number).then(resp=> {

                    if(resp.data.success===true){
                        this.reduceVisible=false;
                        alert("减药成功!");
                        location.reload();


                    }else {
                        this.reduceVisible=false;
                        ElMessage.success("减药失败!");
                    }

                })
            },
            addmedecineform(){

                axios.post("http://119.29.60.153:8001/doctorservice/medecine-manager/addManager?medecineId="+this.addmedecine.medecineId+"&number="+this.addmedecine.number).then(resp=> {

                    if(resp.data.success===true){
                        this.addVisible=false;
                        alert("进药成功!");
                        location.reload();

                    }else {
                        this.addVisible=false;
                        ElMessage.success("进药失败!");
                    }

                })
            },
            updateOnSubmit( formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/medecine-info/updateMedecine",this.medecineInfo).then(resp=> {
                            if(resp.data.success)
                            {
                                alert("修改成功!");
                                location.reload();
                            }
                        });

                    }else {
                        this.dialogVisible = true ;
                        return false;
                    }
                })
            },
            deletemedecineform(){
                axios.delete("http://119.29.60.153:8001/doctorservice/medecine-info/"+this.deletemedecineId).then(resp=> {

                    if(resp.data.success===true){
                        this.deleteVisible=false;
                        ElMessage.success("删除成功!");
                        location.reload();
                    }else {
                        this.deleteVisible=false;
                        ElMessage.success("删除失败!");
                    }

                })
            },
            selectMedecine(){
                axios.post("http://119.29.60.153:8001/doctorservice/medecine-info/searchMedecine",this.medecineQuery).then(resp=> {
                    this.tableData = resp.data.data.lists;
                })
            },
            addmedecines(index,row){
                this.addmedecine.medecineId= row.id;
                this.addVisible = true;
            },
            updatemedecines(index,row){
                this.medecineInfo=row;
                this.updateFormVisble = true;
            },
            reducemedecines(index,row){
                this.medecineManager.medecineId= row.id;
                this.reduceVisible = true;
            },
            deletemedecine(index,row){
                this.deletemedecineId= row.id;
                this.deleteVisible = true;
            },
            handleChange(value) {
                console.log(value);
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            getTime(val) {
                const d = new Date(val);
                this.medecineInfo.beginDate= d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
        }
    }
</script>

<style scoped>
    .login-box{


    }
</style>